﻿@page "/chart/pie-radius"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample compares countries by population density and total area by using various radius in pie series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render pie chart with different radius. You can use the <code>Radius</code> property to achieve this requirement. <code>DataLabel</code> is used to represent individual data and its value.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <SfAccumulationChart EnableAnimation="true" EnableSmartLabels="true" Theme="@Theme">
        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
        <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@PieChartPoints" XName="Country" YName="Population" Radius="Radius" InnerRadius="20%">
                <AccumulationDataLabelSettings Name="Country" Visible="true" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings>
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
    </SfAccumulationChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<PieData> PieChartPoints = new List<PieData>
    {
        new PieData { Country = "Argentina", Population = 505370, Radius = "100"},
        new PieData { Country = "Belgium",    Population = 551500, Radius = "118.7"},
        new PieData { Country = "Cuba",  Population = 312685 , Radius = "124.6"},
        new PieData { Country = "Dominican Republic", Population = 350000 , Radius = "137.5"},
        new PieData { Country = "Egypt", Population = 301000 , Radius = "150.8"},
        new PieData { Country = "Kazakhstan", Population = 300000, Radius = "155.5"},
        new PieData { Country = "Somalia",  Population = 357022, Radius = "160.6"}
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class PieData
    {
        public string Country { get; set; }
        public double Population { get; set; }
        public string Radius { get; set; }
    }
}
